<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子向父通讯</title>
</head>
<body>
<div id="app">
    父当前的num的值为:{{num}}<br/>
<!--    父向子传递方法的引用，传给子的叫jia和减，但是jia对应父的increment-->
    <info @increment="increment" @decrement="decrement"></info>
</div>


<script src="../node_modules/vue/dist/vue.js"></script>
<script>

    let info = {
        template:`
        <div>
            <button @click="increment">点我变大</button>
            <button @click="decrement">点我变小</button>
        </div>
        `,
        methods:{
            increment(){
                //子中调用父传递的方法的引用
                this.$emit("increment");
            },
            decrement(){
                this.$emit("decrement");
            }
        }
    }

    let app = new Vue({
        el: "#app",
        data:{
            num:18
        },
        components:{
            info
        },
        methods: {
            increment(){
                this.num++
            },
            decrement(){
                this.num--
            }
        }

    });

</script>

</body>
</html>